<!-- 设备点保看板 -->
<template>
  <div class="mes-container">
    <div class="containerBox">
      <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
      <!-- 头部 -->
      <all-title ref="allTitle" :comp-info="compInfo" :title-name="titleName" />
      <div class="contentBox">
        <div class="upBox">
          <div class="upBoxLeft fl">
            <div class="overview panel">
              <div class="inner">
                <div class="upBoxLeftBox fl">
                  <h3>点检总计</h3>
                  <div class="upBoxLeftBoxCont">
                    <ul class="allUl topBoxUlOne">
                      <li>
                        <div>
                          <span>{{allNum.pointNum}}</span>
                          <b>今日点检次数</b>
                        </div>
                      </li>
                      <li>
                        <div>
                          <span>{{allNum.checkRate}}%</span>
                          <b>今日通过率</b>
                        </div>
                      </li>
                    </ul>
                    <ul class="allUl topBoxUlTwo">
                      <li>
                        <div>
                          <span>{{allNum.totalPointNum}}</span>
                          <b>历史点检次数</b>
                        </div>
                      </li>
                      <li>
                        <div>
                          <span>{{allNum.totalCheckRate}}%</span>
                          <b>历史通过率</b>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="upBoxLeftBox fl">
                  <h3>保养总计</h3>
                  <div class="upBoxLeftBoxCont">
                    <ul class="allUl topBoxUlOne">
                      <li>
                        <div>
                          <span>{{allNum.maintainNum}}</span>
                          <b>今日保养次数</b>
                        </div>
                      </li>
                      <li>
                        <div>
                          <span>{{allNum.maintainTime}}h</span>
                          <b>今日保养总耗时</b>
                        </div>
                      </li>
                    </ul>
                    <ul class="allUl topBoxUlTwo singe">
                      <li>
                        <div>
                          <span>{{allNum.totalMaintainNum}}</span>
                          <b>历史保养次数</b>
                        </div>
                      </li>
                      <li>
                        <div>
                          <span>{{allNum.totalMaintainTime}}h</span>
                          <b>历史保养总耗时</b>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="upBoxRight fl">
            <div class="overview panel">
              <div class="inner">
                <div class="upRight">
                  <h3>点检完成汇总</h3>
                  <span>
                    计划数：
                    {{checkPlanNum}}
                  </span>
                  <div class="allHeight">
                    <left-eqInfo ref="leftEqInfo" />
                  </div>
                </div>
                <div class="upRight">
                  <h3>保养完成汇总</h3>
                  <span>
                    计划数：
                    {{maintainPlanNum}}
                  </span>
                  <div class="allHeight">
                    <left-eqInfo-two ref="leftEqInfoTwo" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="downBox">
          <div class="downBoxMin downBoxLeft fl">
            <div class="overview panel">
              <div class="inner">
                <h3>点检记录明细</h3>
                <div class="allHeight">
                  <bottom-left-line ref="bottomLeftLine" />
                </div>
              </div>
            </div>
          </div>
          <div class="downBoxMin downBoxRight fl">
            <div class="overview panel">
              <div class="inner">
                <h3>保养记录明细</h3>
                <div class="allHeight">
                  <bottom-right-line ref="bottomRightLine" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { bgFun } from '../../../bg.js'
import leftEqInfo from './components/leftEqInfo'
import leftEqInfoTwo from './components/leftEqInfoTwo'
import bottomLeftLine from './components/bottomLeftLine'
import bottomRightLine from './components/bottomRightLine'
import allTitle from '../components/allTitle'
import { mapGetters } from 'vuex'
export default {
  name: 'EqMaintenance',
  components: {
    leftEqInfo,
    leftEqInfoTwo,
    bottomRightLine,
    allTitle,
    bottomLeftLine
  },
  data() {
    return {
      titleName: '设备点保看板',
      timeInterval: () => {},
      interval: () => {},
      checkPlanNum: '',
      maintainPlanNum: '',
      allNum: {}
    }
  },
  computed: {
    ...mapGetters(['compInfo'])
  },
  created() {},
  async mounted() {
    const loading = this.$loading({
      lock: true,
      text: '数据加载中...', // 数据加载中...
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    setTimeout(async () => {
      loading.close()
      bgFun()
    }, 500)
    await this.startInterval()
    await this.getInfo()
    /* 根据浏览器收缩echarts重铸 */
    window.onresize = () => {
      if (this.$refs['leftEqInfo'].myChart) this.$refs['leftEqInfo'].infoSize()
      if (this.$refs['leftEqInfoTwo'].myChart)
        this.$refs['leftEqInfoTwo'].infoSize()
      if (this.$refs['bottomLeftLine'].myChart)
        this.$refs['bottomLeftLine'].infoSize()
      if (this.$refs['bottomRightLine'].myChart)
        this.$refs['bottomRightLine'].infoSize()
    }
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    /* 刷新 */
    async refreshBtn() {},
    async startInterval() {},
    async getInfo() {
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...', // 数据加载中...
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(async () => {
        loading.close()
        await this.getEquipPoint()
        await this.getEquipPointTwo()
        await this.getStatistics()
        this.$refs['bottomLeftLine'].getPointRecordChart()
        this.$refs['bottomRightLine'].getMaintainRecordChart()
      }, 1000)
    },
    /* 获取点检完成汇总 */
    async getEquipPoint() {
      const res = await this.$axios.get(
        '/board/equip/pointMaintain/pointSummary'
      )
      if (res.data.code === 200) {
        let data = {
          time: [],
          num: []
        }
        res.data.data.details.forEach((item) => {
          data.time.push(item.pointDate)
          data.num.push(item.pointNum)
        })
        this.checkPlanNum = res.data.data.planNum
        this.$refs['leftEqInfo'].setEquipmentLine(data)
      }
    },
    /* 获取保养完成汇总 */
    async getEquipPointTwo() {
      const res = await this.$axios.get(
        '/board/equip/pointMaintain/maintainSummary'
      )
      if (res.data.code === 200) {
        let data = {
          time: [],
          num: []
        }
        res.data.data.details.forEach((item) => {
          data.time.push(item.maintainDate)
          data.num.push(item.maintainNum)
        })
        this.maintainPlanNum = res.data.data.planNum
        this.$refs['leftEqInfoTwo'].setEquipmentLineTwo(data)
      }
    },
    /* 获取所有点检次数和保养次数 */
    async getStatistics() {
      const res = await this.$axios.get(`/board/equip/pointMaintain/statistics`)
      if (res?.data.code === 200) {
        this.allNum = res.data.data
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.mes-container {
  position: fixed;
  z-index: 999999 !important;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: radial-gradient(hwb(221 0% 34%) 20%, #001439 70%);
  background-size: 100% 100%;
  min-width: 1100px;
  min-height: 620px;
  .containerBox {
    position: relative;
    height: 100%;
    .fl {
      float: left;
    }
    .contentBox {
      padding: 10px;
      height: calc(100% - 70px);
      .overview {
        height: 100%;
        background: rgba(15, 27, 71, 0.5);
      }
      .panel {
        /* 边框 */
        box-sizing: border-box;
        border: 2px solid red;
        border-image: url(../../../assets/images/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        position: relative;
        margin-bottom: 0.833rem;
      }
      .line {
        position: absolute;
        left: 0;
        top: 0;
      }
      .panel .inner {
        /* 装内容 */
        /* height: 60px; */
        position: absolute;
        top: -2.125rem;
        right: -1.583rem;
        bottom: -0.875rem;
        left: -5.5rem;
        padding: 15px;
      }
      .panel h3 {
        font-size: 16px;
        font-weight: normal;
        color: #effafc;
        margin: 0;
        padding: 0 0 0 10px;
        height: 35px;
        line-height: 35px;
        background: url(../../../assets/images/kbTitle2.png) no-repeat;
        background-size: 100% 100%;
        width: 50%;
      }
      .allHeight {
        width: 100%;
        height: calc(100% - 35px);
      }
      .upBox {
        height: 60%;
        width: 100%;
        padding-bottom: 10px;
        .upBoxLeft {
          width: 65%;
          padding-right: 5px;
          height: 100%;
          .upBoxLeftBox {
            width: 50%;
            height: 100%;
            .upBoxLeftBoxCont {
              height: calc(100% - 35px);
              padding: 10px 20px 0 0;
              .allUl {
                height: 50%;
                overflow: hidden;
                li {
                  width: calc(50% - 20px);
                  float: left;
                  height: calc(100% - 20px);
                  margin: 10px;
                  color: #fff;
                  text-align: center;
                  div {
                    height: 100%;
                    padding: 10px;
                    color: #badfff;
                    span {
                      display: block;
                      width: 100%;
                      height: 35px;
                      line-height: 35px;
                      font-size: 25px;
                      color: #fff;
                    }
                    b {
                      font-size: 16px;
                    }
                  }
                }
              }
              .topBoxUlOne {
                li {
                  div {
                    background: url(../../../assets/images/sckb/di.png)
                      no-repeat bottom;
                    background-size: 75% 85%;
                  }
                }
              }
              .topBoxUlTwo {
                li {
                  padding: 0 20px;
                  div {
                    background: url(../../../assets/images/quan.png) no-repeat
                      center;
                    background-size: 100% 100%;
                    padding: 30px 10px;

                    span {
                      height: 50%;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    }
                    b {
                      width: 100%;
                      height: 50%;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    }
                  }
                }
              }
              .singe {
                li {
                  div {
                    background: url(../../../assets/images/quan2.png) no-repeat
                      center;
                    background-size: 100% 100%;
                    padding: 30px 10px;
                  }
                }
              }
            }
          }
        }
        .upBoxRight {
          width: 35%;
          padding-left: 5px;
          height: 100%;
          .upRight {
            height: 50%;
            position: relative;
            span {
              position: absolute;
              right: 10px;
              top: 5px;
              color: #fff;
              font-weight: bold;
              background: #1592fe;
              padding: 5px 5px;
              border-radius: 8px;
            }
          }
        }
      }
      .downBox {
        height: 40%;
        width: 100%;
        .downBoxMin {
          width: 50%;
          height: 100%;
        }
        .downBoxLeft {
          padding-right: 5px;
        }
        .downBoxRight {
          padding-left: 5px;
        }
      }
      .leftContent {
        width: 25%;
        height: 100%;
      }
      .centerContBox {
        width: 40%;
        height: 100%;
      }
      .rightContBox {
        width: 35%;
        height: 100%;
      }
    }
  }
}
.box {
  height: 100%;
  width: 100%;
}
.waves {
  width: 100%;
  height: 100%;
}
</style>
